<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<link rel="stylesheet" href="css/style.css" />
	</head>
	<body>
		<div id="echarts" class="container">
			<div class="header">画图</div>
			<div class="content">
				<div id="left-menu"></div>
				<div id="right-content">
					<div class="huatu-item" id="huatu-item-000">
						<div class="header hei50"></div>
						<div class="item-content">
							<div id="huatu-item-000-ellipse-code" class="content-code">
								<button class="code-btn" id="ellipse-btn">运行代码</button>
								<textarea class="code-text" id="ellipse-text">

	option={
		type:'ellipse',
		left:120,
		top:160,
		w:260,
		h:180,
    	color: '#fdf1c4',
		text:'椭圆',
		fn:function(data){
			console.log(data);
		},
		bg:'#2b2b2b'
	}
								</textarea>
							</div>
							<div id="huatu-item-000-ellipse" class="content-chart"></div>
						</div>
					</div>
					<div class="huatu-item" id="huatu-item-001">
						<div class="header hei50"></div>
						<div class="item-content">
							<div id="huatu-item-001-semicircle-code" class="content-code">
								<button class="code-btn" id="semicircle-btn">运行代码</button>
								<textarea class="code-text" id="semicircle-text">

	option={
		type:'semicircle',
		subType:'bottom',//【left,top,right,bottom】
		left:50,
		top:100,
		w:300,
		h:300,
		color: '#c1890a',
		text:'半圆',
		fn:function(data){
			console.log(data);
		},
		is3d:true
	}
								</textarea>
							</div>
							<div id="huatu-item-001-semicircle" class="content-chart"></div>
						</div>
					</div>
					<div class="huatu-item" id="huatu-item-002">
						<div class="header hei50"></div>
						<div class="item-content">
							<div id="huatu-item-002-ladder-code" class="content-code">
								<button class="code-btn" id="ladder-btn">运行代码</button>
								<textarea class="code-text" id="ladder-text">

	option={
		type:'ladder',
		left:100,
		top:100,
		tw:300,
		bw:80,
		h:300,
		color: '#61a0aa',
		text:'梯形',
		fn:function(data){
			console.log(data);
		}
	}
								</textarea>
							</div>
							<div id="huatu-item-002-ladder" class="content-chart"></div>
						</div>
					</div>
					<div class="huatu-item" id="huatu-item-003">
						<div class="header hei50"></div>
						<div class="item-content">
							<div id="huatu-item-003-hopper-code" class="content-code">
								<button class="code-btn" id="hopper-btn">运行代码</button>
								<textarea class="code-text" id="hopper-text">
									
	option={
		type:'hopper',
		left:150,
		top:100,
		tw:330,
		bw:80,
		h:300,
		colors: ['#9dc432','#55b8d7','#fcc006','#e6c093'],
		text:'方程你上课',
		fn:function(index,data){
			console.log(index,data[index].data);
		},
		data:[
	        {value: 60, name: '问题名称1和违标次数',list:[{name:'值',value:1314}]},
	        {value: 40, name: '问题名称2和违标次数',list:[{name:'值',value:1314}]},
	        {value: 20, name: '问题名称3和违标次数',list:[{name:'值',value:1314}]},
	        {value: 80, name: '问题名称4和违标次数',list:[{name:'值',value:1314}]},
	        {value: 100, name: '问题名称5和违标次数',list:[{name:'值',value:1314}]}
	    ],
		gap:10,
		textStyle:{
			left:10,
			top:'middle',
			color:'#000',
			fontSize:16
		},
		arc:'in', //in,out,
		tip:{
			show:true,
			style:{
				width:'200',
				borderRadius:6
			}
		},
	}
								</textarea>
							</div>
							<div id="huatu-item-003-hopper" class="content-chart"></div>
						</div>
					</div>
					<div class="huatu-item" id="huatu-item-004">
						<div class="header hei50"></div>
						<div class="item-content">
							<div id="huatu-item-004-heart-code" class="content-code">
								<button class="code-btn" id="heart-btn">运行代码</button>
								<textarea class="code-text" id="heart-text">

	option={
		type:'heart',
		left:100,
		top:100,
		w:300,
		h:300,
		color: '#aa0000',
		n:36,
		borderWidth:1,
		animal:true,
		text:'心形',
		fn:function(data){
			console.log(data);
		}
	}
								</textarea>
							</div>
							<div id="huatu-item-004-heart" class="content-chart"></div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<script type="text/javascript" src="js/jquery-3.2.1.min.js" ></script>
		<script type="text/javascript" src="js/lyy.js" ></script>
		<script type="text/javascript" src="js/mychart.js" ></script>
	</body>
</html>
